import { Popover } from 'antd';
import { WeaTools } from 'ecCom';
import WeaLicense from '../wea-license';
import WeaVersion from '../wea-version';
import WeaPlugin from '../wea-plugin';
import WeaSystemSetting from '../../wea-system-setting';
import './index.less';

class WeaPortalToolbarMore extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      data: [],
    };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/toolbarMore/getToolbarMoreMenu', 'GET', { menutype: 'front' }).then((result) => {
      this.setState({ data: result.data || [] });
    });
  }

  render() {
    const { className = '', overlayClassName = '' } = this.props;
    const { visible, data = [] } = this.state;

    if (data.length > 0) {
      const content = (
        <div className="wea-portal-toolbar-more-content">
          {data.map((item, index) => {
            const { name, icon } = item;
            return (
              <div key={index} className="wea-portal-toolbar-more-item" title={name} onClick={() => this.onOpen(item)}>
                <i className={icon} />
                <span>{name}</span>
              </div>
            );
          })}
        </div>
      );

      return (
        <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@q36yok`}
          trigger="click"
          placement="bottomLeft"
          content={content}
          overlayClassName={`wea-portal-toolbar-more-overlay ${overlayClassName}`}
          visible={visible}
          onVisibleChange={this.onVisibleChange}
        >
          <div className={`wea-portal-toolbar-more ${className}`}>
            <WeaLicense ecId={`${this && this.props && this.props.ecId || ''}_WeaLicense@mukagr`} ref="WeaLicense" />
            <WeaVersion ecId={`${this && this.props && this.props.ecId || ''}_WeaVersion@9saync`} ref="WeaVersion" />
            <WeaPlugin ecId={`${this && this.props && this.props.ecId || ''}_WeaPlugin@6o0y8f`} ref="WeaPlugin" />
            <WeaSystemSetting ecId={`${this && this.props && this.props.ecId || ''}_WeaSystemSetting@mdtmvg`} ref="WeaSystemSetting" />
            <i className="wevicon-toolbar-more" />
          </div>
        </Popover>
      );
    }
      return null;
  }

  onVisibleChange = (visible) => {
    this.setState({ visible });
  };

  onOpen = (item) => {
    this.onVisibleChange(false);

    const { id, name, url, icon, mobxrouteurl, linkmode, width = 800, height = 500 } = item;
    if (linkmode == '1') {
      const obj = { 3: 'WeaPlugin', 5: 'WeaLicense', 6: 'WeaVersion', 8: 'WeaSystemSetting' };
      const ref = obj[id];
      if (ref) {
        this.refs[ref].onShow();
      } else {
        const dialog = WeaTools.createDialog({
          title: name,
          url,
          icon,
          iconBgcolor: '#1a57a0',
          style: { width, height },
          parentClassName: 'wea-portal-toolbar-dialog',
        });
        dialog.show();
      }
    } else if (this.props.onOpen) {
        const obj = { url, mobxrouteurl, target: linkmode == '0' ? '_blank' : 'mainFrame' };
        this.props.onOpen(obj);
      } else {
        window.open(url);
      }
  };
}

export default WeaPortalToolbarMore;
